<template>

	<div>
		<el-row>
			<el-col :span="18">
				<el-form ref="userRef" :model="form" :rules="rules" label-width="80px" :inline="true">
					<el-form-item label="员工姓名" prop="nickName">
						<el-input size="large" v-model="form.nickName" maxlength="30"
							style="width: 260px;margin-bottom: 10px;" />
					</el-form-item>
					<el-form-item label="员工编号" prop="userId">
						<el-input size="large" disabled v-model="form.userId" maxlength="30"
							style="width: 260px;margin-bottom: 10px;" />
					</el-form-item>
					<el-form-item label="所属部门">
						<el-tree-select disabled size="large" 
						v-model="form.deptId" 
						:data="deptOptions"
							style="width: 260px;margin-bottom: 10px;"
							:props="{ value: 'id', label: 'label', children: 'children' }" value-key="id"
							placeholder="请选择归属部门" check-strictly />
					</el-form-item>
					<el-form-item label="当前角色">
						<el-input size="large" disabled v-model="form.roleGroup" maxlength="11"
							style="width: 260px;margin-bottom: 10px;" />
					</el-form-item>
					<el-form-item label="员工性别" prop="sex">
						<el-radio-group v-model="form.sex" style="width: 260px;margin-bottom: 10px;">
							<el-radio v-for="dict in sys_user_sex" :label="dict.label" :value="dict.value"></el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="员工生日" prop="birthday">
						<el-input size="large" v-model="form.birthday" style="width: 260px;margin-bottom: 10px;" />
					</el-form-item>
					<el-form-item label="手机号码" prop="phonenumber">
						<el-input size="large" v-model="form.phonenumber" maxlength="11"
							style="width: 260px;margin-bottom: 10px;" />
					</el-form-item>
					<!-- <el-form-item label="邮箱" prop="email">
						<el-input size="large" v-model="form.email" maxlength="50" />
					</el-form-item> -->
					<el-form-item label="微信号" prop="wechatId">
						<el-input size="large" v-model="form.wechatId" maxlength="100"
							style="width: 260px;margin-bottom: 10px;" />
					</el-form-item>
				</el-form>
				<div class="text-center" style="margin-top: 250px;">
					<el-button type="defaultBtn" style="width:88px;height: 32px;" @click="submit">保 存</el-button>
					<el-button type="operate"
						style="width: 88px;height: 32px;border: 1px solid #9BA2AB;color: #333;margin-left: 20px;"
						@click="reset">重 置</el-button>
				</div>
			</el-col>
		</el-row>


	</div>
</template>

<script setup name="ProfileUserInfo">
	import {
		updateUserProfile,
		deptTreeSelect
	} from "@/api/system/user";
	const props = defineProps({
		user: {
			type: Object
		}
	});

	const {
		proxy
	} = getCurrentInstance();
	const {
		sys_user_sex
	} = proxy.useDict("sys_user_sex");
	const deptOptions = ref(undefined);


	const form = ref({});
	const rules = ref({
		nickName: [{
			required: true,
			message: "用户昵称不能为空",
			trigger: "blur"
		}],
		wechatId: [{
			required: true,
			message: "不能为空",
			trigger: "blur"
		}],
		sex: [{
			required: true,
			message: "请选择性别",
			trigger: "change"
		}],
		phonenumber: [{
			required: true,
			message: "手机号码不能为空",
			trigger: "blur"
		}, {
			pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
			message: "请输入正确的手机号码",
			trigger: "blur"
		}],
	});
	
	/** 提交按钮 */
	function submit() {
		proxy.$refs.userRef.validate(valid => {
			if (valid) {
				updateUserProfile(form.value).then(response => {
					proxy.$modal.msgSuccess("修改成功");
					props.user.phonenumber = form.value.phonenumber;
					props.user.email = form.value.email;
					props.user.wechatId = form.value.wechatId;
				});
			}
		});
	};
	// 重置按钮
	function reset() {
		form.value.nickName = ''
		form.value.birthday = ''
		form.value.phonenumber = ''
		form.value.wechatId = ''
	}
	/** 关闭按钮 */
	function close() {
		proxy.$tab.closePage();
	};

	// 回显当前登录用户信息
	watch(() => props.user, user => {
		if (user) {
			getDeptTree(user);
		}
	}, {
		immediate: true
	});
	/** 查询部门下拉树结构 */
	function getDeptTree(user) {
		deptTreeSelect().then(response => {
			deptOptions.value = response.data;
			form.value = user
		});
	};
	
	

</script>